<template>
  <div class="item-container">
    <div class="item-text">{{text}}</div>
    <div class="item-num">{{num}}</div>
    <div class="item-label">{{label}}</div>
  </div>
</template>

<script>
export default {
  name: "StatisticItem",
  components: {},
  props: {
    text: String,
    num: [String, Number],
    label: String
  },
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>

<style scoped>
.item-container {
  margin: 10px 17px;
  background-color: #f0f5fc;
  border-radius: 5px;
  height: 25vh;
  width: 10vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
.item-text {
  color: #464748;
  font-size: 14px;
}
.item-num {
  font-size: 40px;
  font-weight: bold;
  color: #187cff;
}
.item-label {
  font-size: 12px;
  color: #abadae;
}
</style>